<template>
    <div class="page-drawer">
        <el-drawer
        size="60%"
            close-on-press-escape
            close-on-click-modal
            v-model="value"
            :title="title"
            :direction="direction"
            :before-close="handleClose"
        >
            <!-- from表单 -->
            <el-form
                :label-position="true"
                label-width="100px"
                :model="formData"
                style="max-width: 460px"
            >
                <el-form-item label="地址名称：">
                    <input
                        :value="formData.title"
                        type="text"
                        placeholder="请输入"
                        class="input input-bordered w-full max-w-xs"
                    />
                </el-form-item>
                <el-form-item label="描述：">
                    <textarea
                        :value="formData.descs"
                        class="textarea textarea-bordered h-24"
                        placeholder="请输入"
                    ></textarea>
                </el-form-item>
                <el-form-item label="状态：">
                    <el-switch
                        v-model="formData.status"
                        class="ml-2"
                        size="large"
                        :active-value="1"
                        :inactive-value="0"
                        @change="handleCheckboxChange"
                        style="--el-switch-on-color: #333; --el-switch-off-color: #999"
                    />
                </el-form-item>
                <el-form-item label="排序：">
                    <input
                        :value="formData.sort"
                        type="text"
                        placeholder="请输入"
                        class="input input-bordered w-full max-w-xs"
                    />
                </el-form-item>

                <el-form-item label="确认：">
                    <div class="btn" @click="submit">提交</div>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>

<script lang="ts">
import { ElLoading, ElMessageBox, ElMessage } from 'element-plus';
import { Component, Emit, Prop, Vue } from 'vue-facing-decorator';

@Component
export default class PageDrawer extends Vue {
    @Prop({ default: false }) public value!: boolean;
    @Prop({ default: '默认标题' }) public title!: string;
    @Prop({ default: 'rtl' }) public direction!: string;
    @Prop({ default: {} }) public formData!: any;

    public imageUrl = '';

    public handleClose(done: () => void) {
        ElMessageBox.confirm('您确认要关闭对话框吗？')
            .then(() => {
                this.$emit('handleCloseEdit', false);
            })
            .catch(() => {
                ElMessage({
                    message: '已取消',
                    type: 'warning',
                });
            });
    }

    // 按钮状态改变
    public handleCheckboxChange(flag: any) {
        if (flag) {
            // 复选框被选中的逻辑处理
            console.log(flag);
        } else {
            // 复选框未选中的逻辑处理
            console.log(flag);
        }
    }

    public submit() {
        ElMessageBox.confirm('您确认要进行提交操作吗？')
            .then(() => {
                this.$emit('handleSubmitEdit', { ...this.formData });
            })
            .catch(() => {
                ElMessage({
                    message: '已取消',
                    type: 'warning',
                });
            });
    }
}
</script>

<style scoped lang="less">
.avatar-uploader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border: 1px dashed #999;
    border-radius: 12px;
    cursor: pointer;
    margin-left: 20px;
    i {
        width: 100%;
    }
}
.btn {
    width: 130px;
}
</style>
